<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            margin: 10px;
            cursor: pointer;
        }
        #div3{
            opacity: 0.3;
            filter: alpha(opacity:0.3);
        }
    </style>
</head>
<body>
    <div id="div1">变宽</div>
    <div id="div2">变高</div>
    <div id="div3">透明度</div>
    <script>
        var oDiv1= document.getElementById("div1");
        var oDiv2 = document.getElementById('div2');

        var oDiv3 = document.getElementById('div3');

        function getStyle(obj,attr) {
            if (obj.currentStyle){
                return obj.currentStyle[attr];
            }
            else{
                return getComputedStyle(obj,false)[attr];
            }
        }
            oDiv1.onmouseover = function () {

                startMove(this,'width',500);
            };
            oDiv1.onmouseout = function () {

                startMove(this,'width',100);
            };
            oDiv2.onmouseover = function () {

                startMove(this,'height',500);
            };
            oDiv2.onmouseout = function () {
                startMove(this,'height',100);
            };

           oDiv3.onmouseover = function () {
               startMove(this,'opacity',100);
           } ;
           oDiv3.onmouseout = function () {
               startMove(this,'opacity',30);
           };

        function startMove(obj,attr,iTarget) {

            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var cur = 0;
                if(attr == 'opacity'){
                    cur =Math.round(parseFloat(getStyle(obj,attr))*100);
                }
                else {
                  cur = parseInt(getStyle(obj,attr));
                }

                var speed = (iTarget-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                if( cur == iTarget){
                    clearInterval(obj.timer);
                }
                else {

                    if(attr=='opacity'){
                        obj.style[attr]=(cur+speed)/100;
                        obj.style.filter='alpha(opacity:'+(cur+speed)+')'
                    }

                    obj.style[attr] = cur+speed+'px';
                }


            },30)

        }

    </script>
</body>
</html>